import { useEffect,useState,useMemo,If } from "react"
import { queryDepart,saveDepart,updateDepart,removeDepart } from "../../../../utils/request/api"
import { Button, Table,Tag,Modal,Form,Input,message,Popconfirm} from "antd"
export default ()=>{
    useEffect(()=>{
       getDepart(1,2)
    },[])
    const [depList,setDepList]=useState([])
    const [total,setTotal]=useState(0)
    const [openMoal,setOpenMoal]=useState(false)// 模态框
    const [cutId,setCutId]=useState(-1)
    const [form]=Form.useForm()
    const getDepart=(pageNum,pageSize)=>{// 获取部门信息
        queryDepart({pageNum,pageSize})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                 setDepList(res.data)
                 setTotal(res.pages.total)
            }
        })
    }
    const addBtn=()=>{// 添加按钮
        setOpenMoal(true)
    }
    const cancelModal=()=>{// 取消添加
        setOpenMoal(false)
    }
    const sureAddDep=()=>{// 确认添加
        // console.log(form);
        let params=form.getFieldsValue()
        saveDepart(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                getDepart(1,2)
                setOpenMoal(false)
            }
        })

    }
    const saveDepBtn=(item)=>{// 修改按钮
         setCutId(item.id)
    }
    const cancleSaveDep=()=>{//取消修改
        setCutId(-1)
    }
    const changeDep=(item,key,e)=>{// 修改input
        item[key]=e.target.value
        setDepList([...depList])
    }
    const sureSaveDep=item=>{// 确认修改
        // console.log(item);
        let {id,depName,remarks}=item
        let params={id,depName,remarks}
        updateDepart(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                getDepart(1,2)
                // setOpenMoal(false)
                setCutId(-1)
                message.success(res.meta.msg)
            }
        })
    }
    const sureDelDep=(id)=>{// 删除部门
        removeDepart({id})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                getDepart(1,2)
                message.success(res.meta.msg)
            }
        })
    }
    const renderDep=useMemo(()=>{
        const props={
            columns:[
                {
                    title:"名称",
                    // dataIndex:"depName",
                    key:"depName",
                    render:item=><>
                     <If isShow={item.id!=cutId}>
                        {item.depName}
                     </If>
                     <If isShow={item.id==cutId}>
                        <Input onChange={changeDep.bind(null,item,'depName')} value={item.depName} />
                     </If>
                    </>
                },
                {
                    title:"描述",
                    // dataIndex:"remarks",
                    key:"remarks",
                    render:item=><>
                     <If isShow={item.id!=cutId}>
                        {item.remarks}
                     </If>
                     <If isShow={item.id==cutId}>
                        <Input onChange={changeDep.bind(null,item,'remarks')} value={item.remarks} />
                     </If>
                    </>
                },
                {
                    title:"等级",
                    // dataIndex:"level",
                    key:"level",
                    render:item=><>
                    <Tag color="skyblue" >{item.level==1?'一级部门':'二级部门'}</Tag>
                    </>
                },
                {
                    title:<Button onClick={addBtn} size="small" type="primary">添加</Button>,
                    render:item=><>
                       <If isShow={item.id!=cutId}>
                        <Button onClick={saveDepBtn.bind(null,item)} size="small" type="primary">修改</Button>
                        &nbsp;
                        &nbsp;
                        <Popconfirm
                        title="确认删除此部门吗"
                        okText="确认"
                        cancelText="取消"
                        onConfirm={sureDelDep.bind(null,item.id)}
                        >
                           <Button size="small" type="danger">删除</Button>
                        </Popconfirm>
                       </If>
                       <If isShow={item.id==cutId}>
                        <Button onClick={sureSaveDep.bind(null,item)} size="small" type="primary">确认</Button>
                        &nbsp;
                        &nbsp;
                        <Button onClick={cancleSaveDep} size="small" type="">取消</Button>
                       </If>
                    </>
                }
            ],
            dataSource:depList,
            pagination:{
                total,
                pageSize:2,
                onChange:(page)=>{
                    // console.log(page);
                    getDepart(page,2)
                }
            }
        }
       return <Table  {...props}  />
    },[depList,cutId])
    return <>
       {renderDep}

       <Modal
         title="添加部门"
         open={openMoal} 
         okText="确认"
         cancelText="取消"
         onCancel={cancelModal}
         onOk={sureAddDep}
       >
          <Form
            name="basic"
            form={form}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 20,
            }}
            initialValues={{
                remember: true,
            }}
            // onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
            >
            <Form.Item
                label="部门名称"
                name="depName"
                rules={[
                {
                    required: true,
                    message: '请输入部门名称!',
                },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="描述"
                name="remarks"
                rules={[
                {
                    required: true,
                    message: '请输入部门描述!',
                },
                ]}
            >
                <Input />
            </Form.Item>

            
            </Form>
       </Modal>
    </>
}